<template>
<div class="search_wrap">
  <CustomNavBar :title="t('Search')"></CustomNavBar>
  <div class="content">
    <div class="search_box">
      <van-field :placeholder="t('Please nnter search keywords')" v-model="keyWord"></van-field>
      <div class="search-icon" @click="searchHandler">
        <svg data-v-30a7f5d9="" aria-hidden="true" class="search1 svg-icon">
          <use data-v-30a7f5d9="" xlink:href="#icon-search1"></use>
        </svg>
      </div>
    </div>
    <div  class="share-certificate" v-if="stockList.length">
      <div  class="share-certificate-title">
        <div  class="share-certificate-title-item share-certificate-item-title-left">{{t('Stocks')}}</div>
        <div  class="share-certificate-title-item">{{t('Latest')}}</div>
        <div  class="share-certificate-title-item">{{t('Increase')}}</div>
        <div  class="share-certificate-title-item share-certificate-item-title-right">{{t('Increase Rate')}}</div>
      </div>
      <div v-for="e in stockList" :key="e.id" class="stock_item share-certificate-title">
         <div  class="share-certificate-title-item share-certificate-item-title-left"><span style="color:#fff;">{{e.name}}</span></div>
        <div  class="share-certificate-title-item">{{e.close}}</div>
        <div  class="share-certificate-title-item" >
          <span :class="`${e.balance >=  0 ? 'upper' : 'lower'}`">{{e.balance >= 0 ? '+' + e.balance : e.balance}}</span>
        </div>
        <div  class="share-certificate-title-item share-certificate-item-title-right">
          <span :class="`${e.balance >=  0 ? 'upper' : 'lower'}`">{{e.rate >= 0 ? '+' : ''}}{{e.rate}}%</span>
        </div>
      </div>
    </div>
    <div  class="empty" style="width: 80%;margin: 20px auto;" v-if="isNodata">
      <img
        style="width: 100%"
        src="@/assets/images/No-records_03.df9abc64.png"
        alt=""
      />
    </div>
  </div>
</div>
</template>
<script setup>
import { ref, } from 'vue'
import { get, post } from '@/utils/request'
import { showLoadingToast, closeToast, showToast } from 'vant'
import { t } from '@/languages'
const stockList  = ref([])
const keyWord = ref('')
const isNodata = ref(false)
async function searchHandler() {
  if(!keyWord.value) {
    showToast(t('Please nnter search keywords'))
    return
  }
  try {
    showLoadingToast()
    let params = {}
    keyWord.value && (params.key_word = keyWord.value)
    const res = await post('/api/app/fstocks/', params)
    const list = res || []
    stockList.value = list.map(e => {
      const balance = e.close - e.open
      const rate = (balance / e.open) * 100
      return {
        ...e,
        balance: balance.toFixed(2),
        rate: rate.toFixed()
      }
    })
    isNodata.value = !stockList.value.length
  } catch (error) {
    console.log(error)
  } finally {
    closeToast()
  }
}

</script>
<style lang="scss" scoped>

.search_box {
  padding: 0 .26667rem;
  width: 100%;
  height: 1.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: .21333rem;
  background: transparent;
  border: .02667rem solid #349a83;
  .van-field {
    background-color: transparent;
    border: none;
   
  }
  :deep(.van-field__control) {
    color: #62f792;
    &::-webkit-input-placeholder {
      color: #349a83;
    }
  }
  .van-cell:after {
    display: none;
  }
  .search1 {
    width: .88rem;
    height: .88rem;
    fill: currentColor;
    overflow: hidden;
  }
}
.content {
  padding: 0.3rem 0.2rem;
}
.share-certificate {
  margin-top: .26667rem;
  .share-certificate-title {
    display: flex;
    border-bottom: .02667rem solid hsla(0, 0%, 100%, .3);
    padding: .21333rem .26667rem;
    justify-content: space-between;
  }
  .share-certificate-title-item {
      width: 1.6rem;
      text-align: center;
      font-size: .32rem;
      font-weight: 700;
      color: #62f792;
  }
  .share-certificate-item-title-left{
      text-align: left !important;
      width: 4rem !important;
  }
}
</style>
